<include file="Public/mheader" />
<style>
	body{
		width:100%;
		height:100%;
		background:url(http://qncdn.game.jjcbw.com/upload/ntxx/bg_2.png?id=098)  no-repeat;
		background-attachment:fixed;
		/*background-size: 100% 100%;
        position: relative;*/
		background-size: cover;
		background-position: 50% 50%;
		font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
		font-size:18px;
	}
	.center{
		margin:0 auto;
		padding: 6em 2em 8em 2em
	}
	.content-subject{
		color: black;
		padding: 8px 2px 2px 8px;
		border-radius: 10px;
		min-height: 4em;
		opacity: 0.8;
	}
	.content-content{
		/*margin-top: 2em;*/
	}
	.title{
		margin-bottom:10px;
	}
	.img{
		margin-top:10px;
	}
	.img img{
		max-width:100%;
	}

	.aw>div{
		margin: 13px 0;
		/* background-color: #B28146; */
		opacity: 0.8;
		border: #888888 1px solid;
		padding: 5px 5px 5px 12px;
		border-radius: 10px;
		position: relative;
	}
	.aw>div>span{
		text-decoration: underline;
	}
	.aw>.error{

	}
	.aw>.error:after{
		content:"";
		width:3px;
		height:20px;
		position: absolute;
		right:15px;
		bottom:5px;
		border-right: red 3px solid;
		transform:rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
	.aw>.error:before{
		content:"";
		width:3px;
		height:20px;
		position: absolute;
		right:15px;
		bottom:5px;
		border-right: red 3px solid;
		transform:rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}
	.aw>.success:after{
		content:"";
		width:10px;
		height:20px;
		position: absolute;
		right:10px;
		bottom:5px;
		border-right: black 3px solid;
		border-bottom: black 3px solid;
		transform:rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
	.aw>.success{
		background-color: red;
	}
	.fra{
		position:absolute;
		right:10px;
		top:5px;
		background:rgba(255,255,255,0.6);
		font-size:16px;
	}
	.cansubmit{
		position: fixed;
		opacity: 0.9;
		top: 6em;
		left: 2.5em;
		width: 15em;
		height: 18.2em;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		display: none;
	}
	.cannext{
		padding: 8em 30px 0 30px;
	}
	.submit-info{
		font-size:14px;
		margin-top:10px;
	}
	.notice{
		position:fixed;
		bottom: 3em;
		width:150px;
		height:132px;
		background:url(http://qncdn.game.jjcbw.com/upload/ntxx/good_job.png)  no-repeat;
		background-position: center center;
		background-size: cover;
		display:none;
	}
	a.btn.btn-block{
		margin-top:5px;
		margin-bottom:5px;
	}

</style>

<div class="center">
	<div class="fra">
		<div>当前第<span class="index">0</span>题，得分：<span class="franum">0</span>，剩余时间:<span class="time">{$seconds}</span>秒</div>
	</div>

	<div class="content-subject">
		<div class="title"></div>
		<div class="img" style="display:none;">相关图片：<img src="" /></div>
	</div>
	<div class="content-content">
		<div class="aw">
			<div class="answer" data-index="1"></div>
			<div class="answer" data-index="2"></div>
			<div class="answer" data-index="3"></div>
			<div class="answer" data-index="4"></div>
		</div>
	</div>

	<div class="cansubmit" id="finish_layer">
		<div class="cannext">
			<div style="color: #ff005e;margin-bottom: 2em;text-align: center;font-size: 16px;">&nbsp;&nbsp;您已回答完毕，得分<span class="franum">0</span>。</div>
				<a href="/Ntxx/Answer/index/group/{$group.id}.html" class="btn btn-default btn-block" style="width: 60%;margin: 5px auto;">回到首页</a></eq>
		</div>
	</div>


	<div class="notice" id="notice_layer">

	</div>
</div>
<script>

	$(function(){
		var title = $(".title");
		var aw1 = $(".aw>div").eq(0);
		var aw2 = $(".aw>div").eq(1);
		var aw3 = $(".aw>div").eq(2);
		var aw4 = $(".aw>div").eq(3);
		var fraDom = $(".franum");
		var timeDom = $(".time");
		var timeout;
		var postanswering = false;

		var nextdata = false;
		function postanswer(i){
			$.post('{:U("postanswer")}',{i:i},function(data){
				if(data.showinfo===1){
					$(".answer[data-index="+data.display+"]").addClass("success");
					if(data.display!==i){
						$(".answer[data-index="+i+"]").addClass("error");
					}
					else{
//						$("#notice_layer").show();
					}
				}
				fraDom.html(data.score);
				if(data.next===1){
					nextdata = data;
					if(data.showinfo===1){
                        anext(2);
					}
					else{
						next();
					}
				}
				else{
                    window.location.href='/Ntxx/answer/finish1.html';

				}
			});

		}
		$(".answer").on("click",function(){
			if(postanswering){
				return;
			}
			postanswering = true;
			var i = $(this).data("index");
			postanswer(i);
		});
		function anext(time) {
            setTimeout(function(){next()},1000*time);
        }
		function next(){
			if(nextdata===false){
				postanswer(0);
				return;
			}
			$(".aw>div").removeClass("success").removeClass("error");
			$("#notice_layer").fadeOut();
			postanswering = false;

			setHTML($(".index"),nextdata.index);
			setHTML(title,nextdata.index+". "+nextdata.title);
			if(nextdata.display1!=="") {
                setHTML(aw1, nextdata.display1);
                aw1.show();
            }
			else
			    aw1.hide();
            if(nextdata.display2!=="") {
                setHTML(aw2, nextdata.display2);
                aw2.show();
            }
            else
                aw2.hide();
            if(nextdata.display3!=="") {
                setHTML(aw3, nextdata.display3);
                aw3.show();
            }
            else
                aw3.hide();
            if(nextdata.display4 !== "") {
                setHTML(aw4, nextdata.display4 );
                aw4.show();
            }
            else
                aw4.hide();

//            if(nextdata.pic!="")
			showimg(nextdata.pic);
			nextdata = false;
//			tonext(31);

			function setHTML(o,v){
				o.empty().append(""+v+"");
			}

		}

        function overDeadLine() {
//			alert("答题超时");
            postanswering = true;
//            $("#finish_layer").fadeIn();
            $.post('{:U("go_deadline")}',{},function(data){
				alert(data.info)
                postanswering = true;
                window.location.href='/Ntxx/answer/finish.html';
            });
        }

        function tonext(time){
			clearTimeout(timeout);
			var t = time-1;
			if(t<=0){
				overDeadLine();
				return;
			}
			timeDom.html(t);
			timeout = setTimeout(function(){tonext(t)},1000);
		}
		function showimg(src){
            var img = $(".img");
            if(!src || src=="") {img.hide();return;}
			var i = new Image();
			i.src = src;
			i.onload = function(){
				img.show().find("img").attr("src",src);
			};
			i.onerror = function(){
				img.hide();
			};
		}
		postanswer(-1);
        tonext({$seconds});
	});

    $(function(){
        audios.play();
    });
    var audios = window["audios"] || {};
    audios = {
        aud: '',
        play: function () {
            var basePath = "/upload/cjdt/";
            var mp3snd = "bg.mp3";

//            if ( $("#bd_audio_1").length > 0 ) {
//                return false;
//            }
            if (this.aud != "") {
                this.aud.play();
                return false;
            }


            this.aud = new Audio();
            this.aud.src = basePath + mp3snd;
            this.aud.loop = "loop";
            this.aud.load();
            setTimeout(function () {
                audios.aud.play();
            }, 300);


        }
    };
</script>
<include file="public/footer" />